<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>p289.css3伪元素-遮罩层</title>
</head>

<style>
   * {
      padding: 0;
      margin: 0; 
      height: 1000px;
   }

   .box1 { 
       /* display: none; */
       position: relative;
       height: 200px;
       width: 200px;
        background: url(pics/jiaban.gif) no-repeat center pink ;
       margin: 100px auto;
   }

   .box1::before {
       display: none;
       content: '';
       position: absolute;
       top: 0;
       left: 0 ;

       height: 100%;
       width: 100%;

       background: rgba(0, 0, 0, .3) url(pics/p289.bofang.png) no-repeat center ;
   }

   .box1:hover::before {
       display: block;

   }

   .box2 {
        border: 2px solid pink;
        height: 200px;
       width: 200px;
       /* background: url(pics/p289.bofang.png) no-repeat center ; */
       margin: 100px auto;
   }

   .box2:hover {
      background: rgba(0, 0, 0, .1) url(pics/p289.bofang.png) no-repeat center ;
   }
</style>
<body>
    <!-- 菜鸡内心os：做出来后，感觉自己又行了。。。又醒了。。。又行了~~~ -->
    <div class="box1"></div> 

    <div class="box2"></div> 


</body>
</html>